<template>
    <div>
        <div class="title">丰宁麻将后台</div>
            <div class="user-panel">
                <Dropdown placement="bottom" trigger="click">
                    <a class="user-name">{{currentAccount.account}}
                        <Icon type="md-arrow-dropdown" />
                    </a>
                    <Dropdown-menu slot="list">
                        <!-- <Dropdown-item style="width:100px;">
                            <span class="user-menu-item">个人设置</span>
                        </Dropdown-item> -->
						<Dropdown-item style="width:100px;">
                            <span class="user-menu-item" @click="loginOut">退出登录</span>
                        </Dropdown-item>
                    </Dropdown-menu>
                </Dropdown>
        </div>
    </div>
</template>

<script>
import accountService from '@/network/service/AccountService.js';
export default {
    name: 'HeaderView.vue',
    data() {
        return {
        }
    },
    methods: {
        loginOut(){
            accountService.signOut().then(res => {
                this.$router.replace({name:'login'});
                this.$store.commit('loginOut');
            });
        }
    },
    mounted() {
        
    },
    computed: {
        currentAccount() {
			var account = this.$store.getters.account;
			if (account == null) {
                this.$router.replace({name: 'login'})
                return;
			}
			return account;
		},
    }
}
</script>

<style lang="less" scoped>
    .title {
        float: left;
        height: 70px;
        line-height: 70px;
        font-size: 20px;
        padding-left: 30px;
        color: #fff;
    }
    .user-panel {
        float: right;
        margin-right: 80px;
        align-items: center;
        margin-top: 25px;
        .user-name {
            color: #fff;
        }
        .user-menu-item {
            font-size: 14px;
            display: inline-block;
            width:100%;
            text-align: center;
        }
    }
</style>

